function httpGet(url, params) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      data: params,
      timeout: 30000,
      type: 'get',
      dataType: 'json',
      async: 'true',
      success: function (response) {
        resolve(response);
      },
      error: function (e) {
        reject(e);
      }
    });
  });
}

var vm = new Vue({
  el: '#app',
  template: `
  <div style="margin: 30px">
  <i-input v-model="inputUrl" placeholder="请输入url" style="width: 70%"/>
    <br/>
    <Select v-model="selectedMaxDepth" style="width:200px" placeholder="请选择遍历深度">
        <Option v-for="item in depthList" :value="item" :key="item">{{ item }}</Option>
    </Select>
    <div style="margin: 20px">
    <i-button @click="submit" type="primary">提交任务</i-button>
    <i-button @click="fetchTaskList" type="primary">刷新任务列表</i-button>
    </div>
    <List style="margin-top: 30px" border header="域名列表" class="taskList" v-if="domainList.length>0">
            <ListItem v-for="(item,index) of domainList" :key="item">{{item}}</ListItem>
    </List>
    <List border header="任务列表" class="taskList">
            <ListItem v-for="(item,index) of taskList" :key="item">{{item.createdDate}}
            <template slot="action">
                <li>
                <i-button @click="showDetail(item.taskId)" type="info">查看域名整理结果</i-button>
                <a :href="getResultPath(item.taskId)" ><i-button type="success">查看详情</i-button></a>
                </li>
            </template>
            </ListItem>
    </List>
  </div>
  `,
  data() {
    return {
      inputUrl: '',
      selectedMaxDepth: -1,
      depthList: [1, 2, 3],
      taskList: [],
      domainList: []
    }
  },
  computed:{
  
  },
  methods: {
    async submit() {
      console.log('submit', this.inputUrl);
      if (!this.inputUrl) {
        this.$Message.info('url不可为空');
        return;
      }
      
      if (this.selectedMaxDepth <= 0) {
        this.$Message.info('请选择遍历深度');
        return;
      }
      
      let submitResponse = await httpGet('/website/auxiliaryTool/api/urlsniffer/submit', {
        url: this.inputUrl,
        maxDepth: this.selectedMaxDepth
      });
      console.log(submitResponse);
      this.fetchTaskList();
    },
    async fetchTaskList() {
      let response = await httpGet('/website/auxiliaryTool/api/urlsniffer/taskList');
      this.taskList = response.taskList;
      this.domainList = [];
    },
    getResultPath(taskId) {
      return `/website/auxiliaryTool/static/result/${taskId}/result.json`
    },
    async showDetail(taskId) {
      console.log('showDetail');
      let response = await httpGet('/website/auxiliaryTool/api/urlsniffer/taskDetail', {
        taskId
      });
      if (response.status == '已完成') {
        this.domainList = response.domainList;
      } else {
        this.domainList = [];
        this.$Message.info('任务尚未完成');
      }
    }
  },
  mounted() {
    console.log('mounted');
    this.fetchTaskList();
  }
})